<template>
  <div class="pcWrap">
    <div class="layer" v-if="flagAlert">
      <div class="mint-msgbox" style="">
        <div class="mint-msgbox-header">
          <div class="mint-msgbox-title">{{nowTime}}</div>
        </div>
        <div class="mint-msgbox-content" :style="bgstyle">
          <div class="mint-msgbox-message" :style="spanStyle">{{alertMsg}}</div>
          <div class="mint-msgbox-input" style="display: none">
            <input placeholder="" type="text" />
            <div class="mint-msgbox-errormsg" style="visibility: hidden"></div>
          </div>
        </div>
        <div class="mint-msgbox-btns">
          <!-- <button class="mint-msgbox-btn mint-msgbox-cancel" style="">
            取消
          </button> -->
          <button class="mint-msgbox-btn mint-msgbox-confirm" @click="confirm">确定</button>
        </div>
      </div>
    </div>
    <div id="toptitle">
      <h1 class="htitle" id="htitle">
        廊坊市人民医院新冠肺炎流行病学调查表
      </h1>
    </div>
    <div class="topic__type">
      <div class="topic__inner">
        <div class="topic__dottedLine"></div>
        <div class="topic__type-body">
          <fieldset>
            <legend class="topic__type-title">基本信息：</legend>
            <div class="ui-control-group ui-matrix-fill">
              <table class="matrix-rating matrix-file-blanks">
                <tbody>
                  <tr>
                    <td>姓名:</td>
                    <td>
                      <div class="topic__type-items">
                        <input
                          autocomplete="off"
                          spellcheck="false"
                          type="text"
                          class="ivu-input ivu-input-default"
                          v-model="formData.name" 
                          disabled="true"
                        />
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>性别：</td>
                    <td>
                      <div class="topic__type-items">
                        <input
                          autocomplete="off"
                          spellcheck="false"
                          type="text"
                          class="ivu-input ivu-input-default"
                          v-model="formData.sex" 
                          disabled="true"
                        />
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>年龄：</td>
                    <td>
                      <div class="topic__type-items">
                        <input
                          autocomplete="off"
                          spellcheck="false"
                          type="text"
                          class="ivu-input ivu-input-default"
                          v-model="formData.age"
                          disabled="true"
                        />
                      </div>
                    </td>
                  </tr>
                  <tr v-if="flagPatientId">
                    <td>登记号:</td>
                    <td>
                      <div class="topic__type-items">
                        <input
                          autocomplete="off"
                          spellcheck="false"
                          type="text"
                          class="ivu-input ivu-input-default"
                          v-model="formData.patient_id"
                          disabled="true"
                        />
                      </div>
                    </td>
                  </tr>
                  <tr v-if="flagidNo">
                    <td>身份证号:</td>
                    <td>
                      <div class="topic__type-items">
                        <input
                          autocomplete="off"
                          spellcheck="false"
                          type="text"
                          class="ivu-input ivu-input-default"
                          v-model="formData.idNo"
                        />
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>来院人员:</td>
                    <td>
                      <div class="topic__type-items">
                        <input
                          autocomplete="off"
                          spellcheck="false"
                          type="text"
                          class="ivu-input ivu-input-default"
                          v-model="relationMsg"
                          disabled="true"
                        />
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </fieldset>
          <fieldset>
          <legend class="topic__type-title_result">采集时间
            <div class="topic__type-items_result" id="flowResult" >
                <input
                    autocomplete="off"
                    spellcheck="false"
                    type="text"
                    class="ivu-input ivu-input-default"
                    v-model="formData.create_time"
                    disabled="true"
                    style="background:green;color:white;font-size:18px"
                />
            </div>
            </legend>
            </fieldset>
            <fieldset>
            <legend class="topic__type-title_result">有效时间
            <div class="topic__type-items_result" id="flowResult" >
                <input
                    autocomplete="off"
                    spellcheck="false"
                    type="text"
                    class="ivu-input ivu-input-default"
                    v-model="formData.sign_data"
                    disabled="true"
                    style="background:green;color:white;font-size:18px"
                />
            </div>
            </legend>
            </fieldset>
            <fieldset>
            <legend class="topic__type-title_result">流调结论
            <div class="topic__type-items_result" id="flowResult" >
                <input
                    autocomplete="off"
                    spellcheck="false"
                    type="text"
                    class="ivu-input_result ivu-input-default"
                    :style="spanStyle"
                    v-model="resultMsg"
                    disabled="true"
                />
            </div>
            </legend>
          </fieldset>
          <fieldset>
          <!-- <a href=""> 河北身健康码</a><br>
          <a href=""> 行程码</a> -->
          <h4 class="u-htitle">河北健康码</h4>
        
          </fieldset>
          <fieldset>
            <legend class="topic__type-title">您已经做完流调，请截图此界面或者保持此界面，提交分诊护士进行诊疗</legend>
          </fieldset>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import axios from 'axios'
import wx from 'weixin-js-sdk'
export default {
  data() {
    return {
      // path:"#小程序://河北健康码/河北健康码/R7B75p0wCL8jkIF",
      path: "/pages/index/index.html",
      xingchegnka: "#小程序://行程卡/通信行程卡/35CxmXUOWFxq6Nk",
      idNo:"", //身份证号
      resultMsg:"未见异常", //流调结论
      relationMsg: "", //与患者关系
      btnisAble: false,
      spanStyle:{
        "--color": "white","--backgroundColor": "green"
      },
      // bgstyle:{
        
      // },
      r_color: "white",
      symptom:[],
    //   showFlag:'0',
      flagidNo:false,
      flagPatientId:true,
      flagAlert: false,
      alertMsg:"",
      nowTime:"",
      formData: {
        address: "", //家庭住址
        age: null, //年龄
        // answer_true: "", //以上医学询问均据实回答(0:否，1：是)
        // appointment_nurse_sign: "", //分诊台护士签字
        // appointment_sign: "", //预约分诊签字
        // department: "", //科室
        // doctor_sign: "", //医生签字
        flow_result_code: "1", //流调结论(1:正常诊疗,2:到发热门诊进行排查)
        name: "", //患者姓名
        // occupation: "", //职业
        // patient_agent_sign: "", //患者代理人签字
        patient_id: "", //登记号
        idNo: "",//身份证号
        // patient_sign: "", //患者签字
        range_in_danger: "0", //发病前14天内是否接触过来自境外或国内中高风险地区的发热或有呼吸道症状的患者(0:否 1:是)
        realation_with_patient: "", //0患者本人  1患者家属
        sex: "1", //(1.男 2.女)
        show_two_weeks: "", //2周内有以下表现吗[(0:无 1:有)|(11:发热,12:咳嗽,13:腹泻,14:新冠肺炎相关其他症状)]   示例有症状，发热和咳嗽"1|11,12"  这样传参
        // sign_data: "", //签字日期
        temperature: "", //今日体温
        touch_with_cov: "0", //发病前14天内是否于新冠病毒感染者有接触(0:否 1:是)
        touch_with_danger: "0", //发病前14天内是否接触过来自境外或国内中高风险地区的发热或有呼吸道症状的患者(0:否 1:是)
        travel_qingdao: "0", //9月27日以来是否有青岛（特别是楼山后社区）的旅居史
      }
    };
  },
  mounted() {
    var btn = document.getElementById("launch-btn");
    btn.addEventListener("launch", function (e) {
      console.log("success",e);
    });
    btn.addEventListener("error", function (e) {
      alert("小程序打开失败");
      console.log("fail", e.detail);
    });
  },
  created() {
    this.initConfig()
    //   调用接口给患者名字赋值
    var fromData = this.$route.query.cardDate
    // this.idNo = fromData.idNo
    console.log('fromData===>',fromData)
    this.getPatientInfo(fromData.idNo);
  },
  methods: {
      initConfig() {
        this.$api.querySdk(location.href.split('#')[0]).then(res=>{
            if(res.status === 200) {
                // console.log('wxa7994d122e3ef074',res.data.timestamp,res.data.nonceStr,res.data.signature)
                wx.config({
                    debug: false, // 是否开启调试模式
                    appId: "wxa7994d122e3ef074", // 必填，公众号的唯一标识
                    timestamp: res.data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
                    signature: res.data.signature, // 必填，签名，见附录1
                    jsApiList: [
                    "wx-open-launch-weap"
                    ],
                    openTagList:['wx-open-launch-weapp'] 
                })
            }
        })
      },
      confirm() {
        this.flagAlert = false
      },
      getPatientInfo(idNo) {
          this.$api.getPatientInfo(idNo).then( res => {
            console.log('patientInfo=====>',res)
              if(res.data.hasFlowExam) {
                  this.formData.sex = res.data.flowExam.sex_code
                  console.log("this.formData.sex===",this.formData.sex)
                  this.formData = res.data.flowExam
                  if(this.formData.realation_with_patient == 0){
                      this.relationMsg = "患者本人"
                  }
                  if(this.formData.realation_with_patient == 1){
                      this.relationMsg = "患者家属"
                  }
                  var commitForm = this.formData
                  var showFlag = commitForm.show_two_weeks.substring(0,1)
                  if(commitForm.travel_qingdao == '1' || commitForm.touch_with_cov == '1' || commitForm.range_in_danger == '1' || commitForm.touch_with_cov == '1' || commitForm.touch_with_danger == '1' || showFlag == '1'){
                      this.resultMsg = '流调异常'
                        // this.spanStyle.color = "white"
                        this.spanStyle.backgroundColor = "red"
                  }else{
                      this.resultMsg = '未见异常'
                      // this.spanStyle.color = "red"
                      this.spanStyle.backgroundColor = "green"
                  }
                  
                  if(this.formData.patient_id == '' || this.formData.patient_id == null) {
                    this.flagPatientId = false
                    this.flagidNo = true
                    // this.formData.idNo = res.data.idNo
                  }else{  
                    this.flagPatientId = true
                    this.flagidNo = false
                    delete this.formData.idNo
                  }
              }else {
                  if(res.data.lntWxMpPatient.patientid == '' || res.data.lntWxMpPatient.patientid == null) {
                      // alert("请您先去公众号建档")
                      this.flagPatientId = false
                      this.flagidNo = true
                      delete this.formData.patient_id
                  }else {
                      this.flagPatientId = true
                      this.flagidNo = false
                      delete this.formData.idNo
                      this.formData.name = res.data.lntWxMpPatient.patId.patientName
                      this.formData.address = res.data.lntWxMpPatient.patId.address
                //   this.formData.sex = res.data.patId.sexCode
                      this.formData.patient_id = res.data.lntWxMpPatient.patientid
                      var idNo = res.data.lntWxMpPatient.patId.idNo
                  
                  //获取出生日期
                      idNo.substring(6, 10) + "-" + idNo.substring(10, 12) + "-" + idNo.substring(12, 14);
                    //获取性别
                      if (parseInt(idNo.substr(16, 1)) % 2 == 1) {
                      //  alert("男");
                      //是男则执行代码 ...
                        this.formData.sex = "1"
                      } else {
                      //  alert("女");
                      //是女则执行代码 ...
                        this.formData.sex = "2"
                      }
                    //获取年龄
                      var myDate = new Date();
                      var month = myDate.getMonth() + 1;
                      var day = myDate.getDate();
                      var age = myDate.getFullYear() - idNo.substring(6, 10) - 1;
                      if (idNo.substring(10, 12) < month || idNo.substring(10, 12) == month && idNo.substring(12, 14) <= day) {
                        age++;
                        this.formData.age = age
                      }
                  }
                  
              }
              
          })
      },
  },
};
</script>
<style>
body {
  font-family: "microsoft yahei";
  color: #323232;
}

mip-fixed {
  bottom: 120px !important;
  right: 12px !important;
}
.layer{
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, .3);
  z-index: 2;
}
.mint-msgbox {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  background-color: #fff;
  width: 85%;
  border-radius: 3px;
  font-size: 16px;
  -webkit-user-select: none;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.mint-msgbox-header {
  padding: 10px 0 10px 0;
  background-color: #337ab7;
  color: #fff;
}
.mint-msgbox-content {
  padding: 10px 20px 15px;
  border-bottom: 1px solid #ddd;
  min-height: 36px;
  position: relative;
  background-color: var(--backgroundColor);
}
.mint-msgbox-input {
  padding-top: 15px;
}
.mint-msgbox-input input {
  border: 1px solid #dedede;
  border-radius: 5px;
  padding: 4px 5px;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
}
.mint-msgbox-input input.invalid {
  border-color: #ff4949;
}
.mint-msgbox-input input.invalid:focus {
  border-color: #ff4949;
}
.mint-msgbox-errormsg {
  color: var(--color);
  font-size: 12px;
  min-height: 18px;
  margin-top: 2px;
}
.mint-msgbox-title {
  text-align: center;
  padding-left: 0;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
}
.mint-msgbox-message {
  color: var(--color);
  margin: 0;
  text-align: center;
  line-height: 36px;
}
.mint-msgbox-btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 40px;
  line-height: 40px;
}
.mint-msgbox-btn {
  line-height: 35px;
  display: block;
  background-color: #fff;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 0;
  border: 0;
}
.mint-msgbox-btn:focus {
  outline: none;
}
.mint-msgbox-btn:active {
  background-color: #fff;
}
.mint-msgbox-cancel {
  width: 50%;
  border-right: 1px solid #ddd;
}
.mint-msgbox-cancel:active {
  color: #000;
}
.mint-msgbox-confirm {
  color: #26a2ff;
  width: 50%;
}
.mint-msgbox-confirm:active {
  color: #26a2ff;
}
.msgbox-bounce-enter {
  opacity: 0;
  -webkit-transform: translate3d(-50%, -50%, 0) scale(0.7);
  transform: translate3d(-50%, -50%, 0) scale(0.7);
}
.msgbox-bounce-leave-active {
  opacity: 0;
  -webkit-transform: translate3d(-50%, -50%, 0) scale(0.9);
  transform: translate3d(-50%, -50%, 0) scale(0.9);
}
fieldset {
  border: 0px solid #c0c0c0;
  margin: 0;
  padding: 0;
}

mip-gototop {
  width: 40px;
  height: 40px;
  border: none;
  background-image: url(/images/newimg/wjx-phone/btn.png);
  background-repeat: no-repeat;
  background-position: 0 -40px;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  mip-gototop {
    background-image: url(/images/newimg/wjx-phone/btn@2x.png);
    background-size: 40px 80px;
  }
}

@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 458dpi) {
  mip-gototop {
    background-image: url(/images/newimg/wjx-phone/btn@3x.png);
    background-size: 40px 80px;
  }
}

.cambrian__box {
  border-top: 1px solid #e0e0e0;
}

.normalcut {
  font-size: 14px;
  font-weight: normal;
}

.topic__dottedLine {
  border-top: 1px dashed #c2c2c2;
}

.marginT10 {
  margin-top: 10px !important;
}

.marginT20 {
  margin-top: 20px !important;
}

.bottom_btn_wrap {
  background: #fff;
  text-align: center;
  position: fixed;

  top: 0;

  width: 100%;
}

.bottom_btn {
  display: block;

  width: 100%;

  height: 45px;
  line-height: 45px;
  text-align: center;
  color: #fff;
  font-size: 16px;
  background: #1ea0fa;
}

.bottom_btn:hover {
  color: #fff;
}

.topic__type {
  padding-bottom: 76px;
}

.goBackBtn {
  display: none;
}

.area-btn-lf {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  flex: 1 1 auto;
  align-self: center;
  display: flex;
  justify-content: center;
  background-color: #fff;
}

.area-btn-lf a {
  position: relative;
  height: 40px;
  font-size: 16px;
  line-height: 40px;
  border-radius: 4px;
  outline: none;
  text-align: center;
  padding: 0 20px;
  margin: 20px 10px;
}

.templatebutton {
  color: #626466;
  background-color: #fff;
  border: 1px solid #d7d7d7;
}

.copybutton {
  color: #fff;
  background-color: #1ea0fa;
  border: 1px solid #1ea0fa;
}

.topic__type-dry,
.topic__type-group,
.topic__type-matrixFull .topic__type-items {
  margin-left: 20px;
}

table.matrix-rating {
  width: 100%;
  overflow: hidden;
}

table.matrix-rating tr td {
  padding: 4px 0;
}

.matrix-rating .text__type {
  width: 50px;
}

.ui-matrix-table {
  width: 100%;
  height: 32px;
  border: 1px solid #b3b3b3;
  background-color: #fff;
  border-radius: 2px;
  -webkit-appearance: none;
}

.ui-matrix-fill {
  padding: 15px;
  background-color: #fafafa;
  border-radius: 6px;
  border: 1px solid #f0f0f0;
}

.ui-matrix-box {
  flex: 1 1 auto;
  height: 32px;
  border: 1px solid #b3b3b3;
  background-color: #fff;
  border-radius: 2px;
}

.ui-matrix-fill .matrix-type-items {
  position: relative;
  font-size: 16px;
  color: #333;
  line-height: 32px;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  margin-bottom: 10px;
  /*margin-left: 12px;*/
}

.ui-control-group .matrix-type-items:last-child {
  margin-bottom: 0;
}

.ui-matrix-header {
  min-height: 50px;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  background-color: #e5e5e5;
  border-radius: 6px 6px 0 0;
}

.ui-matrix-header li {
  flex: 1 1 auto;
  text-align: center;
  padding: 12px 5px;
  line-height: 26px;
}

.ui-matrix-body {
  background-color: #fafafa;
  border-radius: 0 0 6px 6px;
  padding-bottom: 10px;
}

.ui-matrix-bodybox {
  padding: 10px 0;
}

.ui-matrix-body .title {
  font-size: 16px;
  color: #333333;
  padding: 10px 12px;
  line-height: 20px;
}

.ui-matrix-bodybox .option {
  display: flex;
  display: -webkit-flex;
}

.ui-matrix-bodybox .option .option-style {
  flex: 1 1 auto;
  padding: 0 5px;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
}

.ui-matrix-bodybox .option-style .option-all {
  width: 12px;
  height: 12px;
  background-image: url(/images/weixin/mobile/icon@2x.png);
  background-position: 0 0;
  background-size: 25px 25px;
}

.ui-matrix-bodybox .option-style .check {
  background-position: -13px 0;
}

.ui-matrix-bodybox .option-style .radio {
  background-position: 0 0;
}

@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 458dpi) {
  .ui-matrix-bodybox .option-style .check {
    background-image: url(/images/weixin/mobile/icon@2x.png);
  }

  .ui-matrix-bodybox .option-style .radio {
    background-image: url(/images/weixin/mobile/icon@3x.png);
  }
}

.rangeslider {
  margin: 0 15px;
  position: relative;
  background: #e6e6e6;
  display: block;
  height: 12px;
  -webkit-box-shadow: 0px 2px 2px rgba(255, 255, 255, 0.25),
    inset 0px 1px 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 2px 2px rgba(255, 255, 255, 0.25),
    inset 0px 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 2px 2px rgba(255, 255, 255, 0.25),
    inset 0px 1px 3px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

.ruler {
  left: 0;
}

.ui-matrix-slider {
  background-color: #fafafa;
}

.ui-matrix-slider .ui-matrix-bodybox {
  padding-bottom: 20px;
}

.rangeslider-show {
  overflow: hidden;
  font-size: 16px;
  color: #000;
  padding: 0 12px;
  margin-bottom: 10px;
}

table.matrix-rating {
  width: 100%;
  overflow: hidden;
}

table.matrix-rating tr td {
  padding: 5px 0;
}

.matrix-rating .text__type {
  width: 50px;
}

mip-form input {
  border-color: #b3b3b3;
}

mip-form input[type="text"] {
  padding-right: 6px;
  height: 32px;
}

/* 覆盖 mip-form 中的样式  End */
.topic__header {
  font-size: 20px;
  color: #fff;
  height: 53px;
  line-height: 53px;
  text-align: center;
  background-color: #1ea0fa;
}

.topic__header .topic__inner {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.header {
  background: none repeat scroll 0 0 #fff;
  color: #fff;
  display: inline-block;
  font-size: 20px;
  height: 46px;
  line-height: 46px;
  border-bottom: 1px solid #e0e0e0;
  overflow: hidden;
  padding: 0 70px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  z-index: 999;
  position: relative;
}

.header_left {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 40px;
  height: 50px;
}

.header_left i.backnew {
  width: 20px;
  height: 18px;
  background-size: 20px 18px;
  display: inline-block;
  margin: 15px auto 0 auto;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("/images/weixin/return@2x.png");
}

.header_right {
  position: absolute;
  right: 0px;
  top: 0px;
  min-width: 60px;
  height: 50px;
}

.rm10 {
  margin-right: 10px;
}

.miniButton {
  margin: 8px 10px 0 0;
  float: left;
  border-radius: 15px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  line-height: 30px;
  padding: 0 16px;
  background: #7acc52;
  box-shadow: 1px 2px 4px 1px rgba(30, 160, 250, 0.4);
}

#toptitle {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 26px 10px 12px;
  width: 100%;
  color: #1ea0fa;
  box-sizing: border-box;
}

#toptitle .htitle {
  font-size: 20px;
  line-height: 32px;
  font-weight: bold;
  margin: 0;
  padding: 0;
  text-align: center;
}

.topic__type {
  padding: 0 0 20px;
}

.topic__inner {
  padding: 0 18px;
}

.topic__type-des {
  font-size: 16px;
  color: #666;
  text-indent: 25px;
  line-height: 24px;
  margin: 16px 0;
}

.topic__type-body fieldset {
  margin-top: 4px;
}

.topic__type-body fieldset:first-child {
  margin-top: 12px;
}

.topic__type-body fieldset:last-of-type {
  margin-top: 20px;
}

.topic__type-title_result {
  font-size: 26px;
  font-weight: bold;
  line-height: 26px;
  margin-bottom: 20px;
}

.topic__type-dry label {
  margin-left: 18px;
}

.topic__type-items {
  position: relative;
  font-size: 16px;
  color: #333;
  line-height: 32px;
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.topic__type-items_result {
  position: relative;
  font-size: 26px;
  color: #333;
  line-height: 32px;
  display: flex;
  display: -webkit-flex;
  align-items: center;
}

.topic__type-dry .topic__type-items {
  line-height: 1.4;
  margin-bottom: 6px;
  display: block;
}

.topic__type-ML--6 {
  margin-left: 6px;
}

.topic__type-width--81 {
  width: 81px;
}

.topic__type-width--27 {
  width: 27px;
}

.topic__type-width--108 {
  width: 108px;
}

.topic__type--many {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}

.topic__type--many .topic__type-title {
  margin-bottom: 0;
}

.topic__type--many .topic__type-items {
  flex: 0 0 auto;
  margin-right: 10px;
}

.topic__type-items .radio__type {
  flex: 0 0 auto;
  position: absolute;
  top: 6px;
  width: 12px;
  height: 12px;
  border: 1px solid #666;
  border-radius: 50%;
}

.topic__type-items .checkbox__type {
  flex: 0 0 auto;
  position: absolute;
  top: 6px;
  width: 12px;
  height: 12px;
  border: 1px solid #666;
}

.topic__type-items .text__type {
  flex: 1 1 auto;
  height: 32px;
  border: 1px solid #b3b3b3;
  background-color: #fff;
}

.topic__type-items .select__type {
  position: relative;
  width: 92px;
  height: 32px;
  line-height: 30px;
  padding: 0 10px;
  border: 1px solid #b3b3b3;
  background-color: #fff;
}

.topic__type-items .select__type::after {
  display: block;
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  border: 4px solid #fff;
  border-top: 5px solid #323232;
}

.topic__type-items .textarea__type {
  height: 130px;
  flex: 1 1 auto;
  border: 1px solid #b3b3b3;
}

.topic__type--many .topic__type-items label {
  margin-right: 6px;
}

.topic__type--many .topic__type-items .text__type {
  border: none;
  height: 14px;
  border-bottom: 2px solid #b3b3b3;
}

.topic__type-matrixFull .topic__type-items {
  margin-bottom: 10px;
}

.topic__type-matrixFull label {
  margin-right: 10px;
}

.topic__type-matrixScale {
  font-size: 15px;
}

.topic__type-matrixScale .topic__type-items .radio__type,
.topic__type-matrixScale .topic__type-items .checkbox__type {
  top: 11px;
}

.topic__type-body fieldset .topic__type-group {
  display: block;
  margin-bottom: 16px;
}

.topic__type-body fieldset .topic__type-group:last-child {
  margin-bottom: 0;
}

.topic__type-group .topic__type-sub {
  font-size: 17px;
}

.topic__type-group input + label {
  font-size: 15px;
  margin-left: 6px;
}

.topic__type-group .radio__type + label,
.topic__type-group .checkbox__type + label,
.topic__type-group label + .text__type,
.topic__type-group label + .select__type {
  font-size: 15px;
  margin-left: 18px;
}

.topic__type-itemsGroup {
  display: block;
  padding: 5px 16px;
  margin-top: 8px;
  background-color: #f7f7f7;
}

.topic__type-sort .sortNum + label {
  margin-left: 18px;
}

.topic__type-sort .sortNum::before {
  content: "[ ]";
  position: absolute;
  color: #666;
  top: 7px;
  line-height: 1;
}

.topic__type-tableText .topic__type-itemsGroup {
  padding: 10px 16px;
}

.topic__type-tableText .topic__type-items {
  margin-bottom: 10px;
}

.topic__type-tableText .text__type {
  width: 100px;
  flex: 0 0 auto;
}

.topic__type-tableText .topic__type-items:last-child {
  margin-bottom: 0;
}

.preview-btn {
  font-size: 14px;
  line-height: 14px;
  border-radius: 3px;
  padding: 8px 16px;
  margin: 0 3px;
  -webkit-tap-highlight-color: transparent;
}

.wjx__home {
  position: fixed;
  right: 12px;
  bottom: 170px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: url(/images/newimg/wjx-phone/btn.png) no-repeat center;
  background-repeat: no-repeat;
  background-position: 0 0;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .wjx__home {
    background-image: url(/images/newimg/wjx-phone/btn@2x.png);
    background-size: 40px 80px;
  }
}

@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 458dpi) {
  .wjx__home {
    background-image: url(/images/newimg/wjx-phone/btn@3x.png);
    background-size: 40px 80px;
  }
}

.ivu-input {
  display: inline-block;
  width: 100%;
  height: 32px;
  line-height: 1.5;
  padding: 4px 7px;
  font-size: 14px;
  border: 1px solid #dcdee2;
  border-radius: 4px;
  color: #515a6e;
  background-color: #fff;
  background-image: none;
  position: relative;
  cursor: text;
  transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
}

.ivu-input_result {
  display: inline-block;
  width: 100%;
  height: 62px;
  line-height: 1.5;
  padding: 4px 7px;
  font-size: 34px;
  border: 1px solid #dcdee2;
  border-radius: 4px;
  color: var(--color);
  background-color: var(--backgroundColor);;
  background-image: none;
  position: relative;
  cursor: text;
  transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
}

.input_align_5 {
  vertical-align: middle;
  margin-top: -2px;
  margin-bottom: 0px;
}

.btn {
  display: block;
  width: 100%;
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  margin-top: 10px;
}
.flowResult {
  background:red
}
.u-htitle{
  margin: 5px 0;
}
.topic__type-title_result{
  margin-bottom: 8px;
}
</style>